*{
	margin:0;
	padding:0;
}
body,html{
	height: 100%;
	width:100%;
	font-size: 10px;
	
}
#box{
	width: 100%;
	height: 100%;
	background: url(../img/img1/bk.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;

}
#nav{
	width: 10rem;
	height: 3rem;
	position: absolute;
	left:38%;
	top:1.8rem;
	font-size:3rem;
	
}
#nav p{
	color:rgb(209,20,26);
	font-size:3rem;
}
#red{
	width:3rem;
	height:3rem;
	position: absolute;
	left:85%;
	top:1rem;
	-webkit-animation-name:red;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-name:red;
	-moz-animation-delay:0s;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function:linear;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate;
	-moz-animation-fill-mode:backwards;
	-o-animation-name:red;
	-o-animation-delay:0s;
	-o-animation-duration: 3s;
	-o-animation-timing-function:linear;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:alternate;
	-o-animation-fill-mode:backwards;
	-ms-animation-name:red;
	-ms-animation-delay:0s;
	-ms-animation-duration: 5s;
	-ms-animation-timing-function:linear;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:alternate;
	-ms-animation-fill-mode:backwards;
}
@keyframes red{
	0%{
		transform:scale(0.2);
		
	}
	20%{
		transform:scale(0.4);
		/*display: none;*/
		opacity: 0;
	}
	50%{
		transform:scale(0.8);
		/*display:block;*/
		opacity: 1;
	}
	80%{
		transform:scale(1);
		/*display: none;*/
		opacity: 0;
		
	}
	100%{
		transform:scale(1.2);
		/*display: block;*/
		opacity: 1;
	}
}
#success{
	position: absolute;
	left:23%;
	top:6rem;
	font-size:2rem;
	color:rgb(271,125,20);
	
}

#lv{
	position: absolute;
	top:10rem;
	left:25%;
	width:14rem;
	height: 15rem;
}
#result{
	position: absolute;
	left:17%;
	top:26rem;
	color:white;
	font-size:2rem;
}
#anwei{
	position: absolute;
	top:40rem;
	left:30%;
}
#recome{
	position: absolute;
	top:46rem;
	left:30%;
}
#lei{
	position: absolute;
	top:18.1rem;
	left:43.9%;
	-webkit-animation-name:lei;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function:linear;
	/*-webkit-animation-iteration-count:infinite;*/
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-fill-mode:forwards;
	-moz-animation-name:lei;
	-moz-animation-delay:0s;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function:linear;
	/*-moz-animation-iteration-count:infinite;*/
	/*-moz-animation-direction:alternate;*/
	-moz-animation-fill-mode:none;
	-o-animation-name:lei;
	-o-animation-delay:0s;
	-o-animation-duration: 3s;
	-o-animation-timing-function:linear;
	/*-o-animation-iteration-count:infinite;*/
	/*-o-animation-direction:alternate;*/
	-o-animation-fill-mode:forwards;
	-ms-animation-name:lei;
	-ms-animation-delay:0s;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function:linear;
	/*-ms-animation-iteration-count:infinite;*/
	/*-ms-animation-direction:alternate;*/
	-ms-animation-fill-mode:forwards;
}
@keyframes lei1{
	0%{
		width:2rem;
		height: 0;
	}
	20%{
		width:2rem;
		height:2rem;
		
	}
	50%{
		width:2rem;
		height:3rem;
	}
	80%{
		width:2rem;
		height:5rem;
		opacity: 0.5;
	}
	100%{
		width:2rem;
		height:5.5rem;
		opacity:0;
		display: none;
	}
	
}
#lei1{
	position: absolute;
	top:18.6rem;
	left:43%;
	-webkit-animation-name:lei1;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function:linear;
	/*-webkit-animation-iteration-count:infinite;*/
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-fill-mode:forwards;
	-moz-animation-name:lei1;
	-moz-animation-delay:0s;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function:linear;
	/*-moz-animation-iteration-count:infinite;*/
	/*-moz-animation-direction:alternate;*/
	-moz-animation-fill-mode:none;
	-o-animation-name:lei1;
	-o-animation-delay:0s;
	-o-animation-duration: 3s;
	-o-animation-timing-function:linear;
	/*-o-animation-iteration-count:infinite;*/
	/*-o-animation-direction:alternate;*/
	-o-animation-fill-mode:forwards;
	-ms-animation-name:lei1;
	-ms-animation-delay:0s;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function:linear;
	/*-ms-animation-iteration-count:infinite;*/
	/*-ms-animation-direction:alternate;*/
	-ms-animation-fill-mode:forwards;
}
#lei2{
	position: absolute;
	top:17rem;
	left:54%;
	-webkit-animation-name:lei2;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function:linear;
	/*-webkit-animation-iteration-count:infinite;*/
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-fill-mode:forwards;
	-moz-animation-name:lei2;
	-moz-animation-delay:0s;
	-moz-animation-duration: 3s;
	-moz-animation-timing-function:linear;
	/*-moz-animation-iteration-count:infinite;*/
	/*-moz-animation-direction:alternate;*/
	-moz-animation-fill-mode:none;
	-o-animation-name:lei2;
	-o-animation-delay:0s;
	-o-animation-duration: 3s;
	-o-animation-timing-function:linear;
	/*-o-animation-iteration-count:infinite;*/
	/*-o-animation-direction:alternate;*/
	-o-animation-fill-mode:forwards;
	-ms-animation-name:lei2;
	-ms-animation-delay:0s;
	-ms-animation-duration: 3s;
	-ms-animation-timing-function:linear;
	/*-ms-animation-iteration-count:infinite;*/
	/*-ms-animation-direction:alternate;*/
	-ms-animation-fill-mode:forwards;
}
@keyframes lei2{
	0%{
		width:2rem;
		height: 0;
	}
	20%{
		width:2rem;
		height:2rem;
		
	}
	50%{
		width:2rem;
		height:3rem;
	}
	80%{
		width:2rem;
		height:5rem;
		opacity: 0.5;
	}
	100%{
		width:2rem;
		height:5.5rem;
		opacity:0;
		display: none;
	}
	
}
